{include file="../application/api/view/layout/header.html" /}
{if condition="($toLan == 'zh')"}
<link rel="stylesheet" href="../css/contact.css">
{else /}
<link rel="stylesheet" href="../css/exzh/contact.css">
{/if}

<div class="about-banner contact">
        <h2>｜ <?php echo translate('联系我们',$fromLan,$toLan);?> ｜</h2>
        <div class="title">Contact Us</div>
    </div>

    <section class="section-tab w1200">
        {include file="../application/api/view/layout/contactBox.html" /}
        <div class="main-box">
            <div class="main-title">
                <h3><?php echo translate('询盘表单提交',$fromLan,$toLan);?></h3>
                <p><?php echo translate('联系我们',$fromLan,$toLan);?> <i>/</i> <span><?php echo translate('询盘表单提交',$fromLan,$toLan);?></span></p>
            </div>
            <div class="about-box">
                <div class="fromBox flex-column align-items-center">
                    <h1>REQUEST A QUOTE</h1>

                    <form id="formList" class="flex-column">
                        <div class="flex-row space-between">
                            <input class="mr32 flex1 name" type="text" placeholder="Full Name">
                            <input class="flex1 email" type="text" placeholder="Email">
                        </div>
                        <div class="flex-row space-between mt32">
                            <input class="mr32 flex1 company" type="text" placeholder="Company">
                            <input class="flex1 jobtitle" type="text" placeholder="Job Title">
                        </div>
                        <div class="flex-row space-between mt32">
                            <input class="mr32 flex1 address" type="text" placeholder="Business Address">
                            <input class="flex1 phone" type="text" placeholder="Phone">
                        </div>
                        <div class="flex-row space-between mt32">
                            <select class="mr32 flex1 slitCoil" name="" id="">
                                <option value="<?php echo translate('成卷线材',$fromLan,$toLan);?>"><?php echo translate('成卷线材',$fromLan,$toLan);?></option>
                                <option value="<?php echo translate('异形线材',$fromLan,$toLan);?>"><?php echo translate('异形线材',$fromLan,$toLan);?></option>
                            </select>
                            <input class="flex1 quantity" type="text" placeholder="Quantity">
                        </div>
                        <textarea class="mt32 material" name="" id="" cols="30" rows="5"
                                  placeholder="Material"></textarea>
                        <textarea class="mt32 packagingRequirements" name="" id="" cols="30" rows="5"
                                  placeholder="Packaging Requirements"></textarea>
                        <div class="flex-row submit mt32 space-between">
                            <div class="flex-row align-items-center radioPraent">
                                <input class="radio" type="radio" name="Agree to Terms of Service" >
                                <span>Agree to </span>
                                <a href="./page-style-19.html" target="_blank">Terms of Service</a>
                            </div>

                            <a href="#" class="flex-row center submit-btn">
                                SEND MESSAGE
                                <img src="../img/contact/arrow.png?x-oss-process=image/format,webp/quality,Q_75" alt="SEND MESSAGE">
                            </a>

                        </div>

                    </form>


                </div>

            </div>
        </div>
    </section>

<script>
    window.onload = function () {
        var submit = $('#formList .submit-btn')
        var validate = function () {
            var name = $('#formList .name')
            var email = $('#formList .email')
            var radio = $('#formList .radio')
            var radioPraent = $('#formList .radioPraent')
            if (!name.val()) {
                name.addClass('error')
                return false
            } else {
                name.removeClass('error')
            }
            if (!email.val()) {
                email.addClass('error')
                return false
            }
            else {
                email.removeClass('error')
            }
            // 验证邮箱格式
            var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
            if (email.val() && !reg.test(email.val())) {
                email.addClass('error')
                return false
            } else {
                email.removeClass('error')
            }
            // 验证radio是否被选中
            if (!radio.is(':checked')) {
                radioPraent.addClass('error')
                return false
            } else {
                radioPraent.removeClass('error')
            }
            return true
        }
        $('#formList .name').on('change', function () {
            validate()
        })
        $('#formList .email').on('change', function () {
            validate()
        })
        $('#formList .radio').on('change', function () {
            validate()
        })
        submit.on('click', function (e) {
          e.preventDefault()
            let flag = validate()
            if (!flag) return
            var name = $('#formList .name')
            var email = $('#formList .email')
            var company = $('#formList .company')
            var jobtitle = $('#formList .jobtitle')
            var address = $('#formList .address')
            var phone = $('#formList .phone')
            var slitCoil = $('#formList .slitCoil')
            var quantity = $('#formList .quantity')
            var material = $('#formList .material')
            var packagingRequirements = $('#formList .packagingRequirements')
            let data = {
                name: name.val(),
                email: email.val(),
                company: company.val(),
                job_title: jobtitle.val(),
                business_address: address.val(),
                phone: phone.val(),
                coil: slitCoil.val(),
                quantity: quantity.val(),
                material: material.val(),
                requirements: packagingRequirements.val()
            }
            console.log('data', data)
            // 发送请求
            $.ajax({
                type : "POST",
                url : "{$apiurl}/api/Message/add",
                dataType : "json",
                data : JSON.stringify(data),
                contentType:"application/json;charset=utf-8",
                success : function(res) {
                    console.log(res);
                    alert("<?php echo translate('提交成功',$fromLan,$toLan);?>");
                }
            });
        })
    }
</script>

{include file="../application/api/view/layout/footer.html" /}
